<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
  </div>
  <script src="/dist/umd/vue.js"></script>
  <script>
    Vue.component('my', {
      template: '<div>my</div>'
    })
    let vm = new Vue({
      el: '#app',
      data: {
        name: 'zf',
        age: 10
      },
      // watch 在内部会对变量取值  computed不会 只有取值的时候才会
      // 缓存 依赖 值不变就不重新执行
      // 模板渲染
      computed: {
        allName() {
         console.log('run')
          return this.name +'-' +this.age
        }
      }
      // watch: {
      //   name(newval, old) {
      //     console.log(newval, old)
      //   }
      // }
    })
    // setTimeout(()=>{
    //   vm.name = 'jw'
    // }, 3000)
    vm.allName
    vm.allName
      setTimeout(() => {
        vm.name = 'jw'
        vm.allName
      }, 1000)
  </script>
</body>
</html>